# TabBar

## Installation
`npm i @snack-uikit/tabs`

[Changelog](./CHANGELOG.md)

## Example

```typescript jsx
const [value, setValue] = useState('tab1');

<Tabs value={value} onChange={setValue}>
  <Tabs.TabBar>
    <Tabs.Tab label='Tab 1' value='tab1' counter={12} />
    <Tabs.Tab label='Tab 2' value='tab2' />
    <Tabs.Tab label='Tab Disabled' value='tab3' disabled />
  </Tabs.TabBar>
  <Tabs.TabContent className={styles.tab} value='tab1'>
    Content of tab1
  </Tabs.TabContent>
  <Tabs.TabContent className={styles.tab} value='tab2'>
    Content of tab2
  </Tabs.TabContent>
  <Tabs.TabContent className={styles.tab} value='tab3'>
    Content of tab3
  </Tabs.TabContent>
</Tabs>
```

[//]: DOCUMENTATION_SECTION_START
[//]: THIS_SECTION_IS_AUTOGENERATED_PLEASE_DONT_EDIT_IT
## Tabs
### Props
| name | type | default value | description |
|------|------|---------------|-------------|
| value | `string` | - | Текущая вкладка |
| defaultValue | `string` | - | Выбранная вкладка по-умолчанию |
| onChange | `(id: T) => void` | - | Колбек выбора вкладки |
## Tabs.Tab
### Props
| name | type | default value | description |
|------|------|---------------|-------------|
| label* | `string` | - | Заголовок вкладки. |
| value* | `string` | - | Value вкладки. |
| disabled | `boolean` | - | Деактивирована ли вкладка. |
| className | `string` | - | CSS-класс |
| counter | `number` | - | Счетчик, отображающийся внутри кнопки переключения. |
| onClick | `(event: MouseEvent<HTMLButtonElement, MouseEvent>) => void` | - | Колбек клика по кнопке переключения. |
## Tabs.TabBar
### Props
| name | type | default value | description |
|------|------|---------------|-------------|
| children* | `ReactElement<TabProps, string \| JSXElementConstructor<any>>[]` | - | Контент (элементы Tabs.Tab) |
| after | `ReactNode` | - | Дополнительный слот для кастомного контента справа от табов |
| className | `string` | - | CSS-класс |
| type | "primary" \| "secondary" | "primary" <br> - `Primary` - когда панель табов является верхнеуровневым элементом страницы, замещающим заголовок. <br> - `Secondary` - когда панель табов расположена на том же уровне что и остальной контент | Тип панели табов: |
| disableDivider | `boolean` | - |  |
## Tabs.TabContent
### Props
| name | type | default value | description |
|------|------|---------------|-------------|
| value* | `string` | - | Значение таба |
| className | `string` | - | CSS-класс |


[//]: DOCUMENTATION_SECTION_END
